<style>
    .card-header {
        display: block;
        margin-bottom: 10px;
    }

    .card-title {
        padding: 10px 0;
    }

    .card-title:last-child {
        padding: 0;
    }
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group col-md-12">
                            <button type="button" class="btn btn-default"
                                onclick="javascript:history.back(-1);return false;">返 回</button>
                        </div>
                        <header class="card-header">
                            <div class="card-title">预约进度</div>
                        </header>
                        <ul class="lyear-timeline lyear-timeline-left">
                            {if $Order.status == -1}
                            <li class="lyear-timeline-item">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-success"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>已撤销预约</strong></p>
                                    <p class="mb-0">审核通过</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                            </li>
                            {/if}
                            {if $Order.status == -3}
                            <li class="lyear-timeline-item">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-danger"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>平台拒绝撤销</strong></p>
                                    <p class="mb-0">审核不通过</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                            </li>
                            {/if}
                            {if $Order.status == -2 || $Order.status == -3 || $Order.status == -1}
                            <li class="lyear-timeline-item {$Order['status'] == -2?'':'text-muted'}">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-danger"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>撤销预约中</strong></p>
                                    <p class="mb-0">等待审核</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                            </li>
                            {/if}
                            {if $Order.status >= 3 && $Order.rate}
                            <li class="lyear-timeline-item {$Order['rate'] ?'':'text-muted'}">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-info"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>已评分：{$Order.rate}分</strong></p>
                                    <p class="mb-0">已完成</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                            </li>
                            {/if}
                            {if $Order.status > 2}
                            <li class="lyear-timeline-item {$Order['status']==3 && $Order.rate ?'text-muted':''}">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-info"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>预约已完成</strong></p>
                                    <p class="mb-0">已完成</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                            </li>
                            {/if}
                            {if $Order.status == 2}
                            <li class="lyear-timeline-item">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-success"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>等待师傅上门</strong></p>
                                    <p class="mb-0">等待中</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                            </li>
                            {/if}
                            {if $Order.status > 1 || $Order.status < 0} <li class="lyear-timeline-item text-muted">
                                <div class="lyear-timeline-item-dot">
                                    <span class="badge badge-info"></span>
                                </div>
                                <div class="lyear-timeline-item-content">
                                    <p class="mb-1"><strong>已付款</strong></p>
                                    <p class="mb-0">已完成</p>
                                    <p><time class="mb-3"></time></p>
                                </div>
                                </li>
                                {/if}

                                {if $Order.status == 1 || $Order.status < 0} <li
                                    class="lyear-timeline-item {$Order['status']==1 ?'':'text-muted'}">
                                    <div class="lyear-timeline-item-dot">
                                        <span class="badge badge-danger"></span>
                                    </div>
                                    <div class="lyear-timeline-item-content">
                                        <p class="mb-1"><strong>未付款</strong></p>
                                        <p class="mb-0">等待付款中</p>
                                        <p><time class="mb-3"></time></p>
                                    </div>
                                    </li>
                                    {/if}
                                    {if $Order.status >0 || $Order.status < 0} <li
                                        class="lyear-timeline-item text-muted">
                                        <div class="lyear-timeline-item-dot">
                                            <span class="badge badge-info"></span>
                                        </div>
                                        <div class="lyear-timeline-item-content">
                                            <p class="mb-1"><strong>已接单</strong></p>
                                            <p class="mb-0">已完成</p>
                                            <p><time class="mb-3"></time></p>
                                        </div>
                                        </li>
                                        {/if}

                                        {if $Order.status == 0 || $Order.status < 0} <li
                                            class="lyear-timeline-item {$Order['status']==0 ?'':'text-muted'}">
                                            <div class="lyear-timeline-item-dot">
                                                <span class="badge badge-success"></s>
                                            </div>
                                            <div class="lyear-timeline-item-content">
                                                <p class="mb-1"><strong>未接单</strong></p>
                                                <p class="mb-0">订单等待师傅接单</p>
                                                <p><time class="mb-3"></time></p>
                                            </div>
                                            </li>
                                            {/if}

                                            {if $Order.status >= 0 || $Order.status < 0} <li
                                                class="lyear-timeline-item">
                                                <div class="lyear-timeline-item-dot">
                                                    <span class="badge badge-info"></span>
                                                </div>
                                                <div class="lyear-timeline-item-content">
                                                    <p class="mb-1"><strong>已下单</strong></p>
                                                    <p class="mb-0">已完成</p>
                                                    <p><time class="mb-3"></time></p>
                                                </div>
                                                </li>
                                                {/if}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!--End 页面主要内容-->